<template>
  <div class="wrap">
    <div class="top" @click="goMyInfo">
      <div class="left">
        <img v-if="avatarUrl" :src="avatarUrl" />
        <img v-else src="./../../assets/img/default-avatar.png" />
        <div class="txt">
          <span class="avatar-txt">{{ nickName }}</span>
          <span class="phone-txt">{{ maskPhoneNumber(mobile) }}</span>
        </div>
      </div>
      <div class="right">
        <img class="iconfont" src="./../../assets/img/arrow-right-white.png" />
      </div>
    </div>
    <div class="center">新人有礼，领免费体验礼包</div>

    <div class="list">
      <div class="ul">
        <div class="li" @click="goHref('mySwimTicket')">
          <div class="left">
            <img class="icon" src="./../../assets/img/mySwimTicket.png" />
            <div class="txt">我的泳票</div>
          </div>
          <img class="img" src="./../../assets/img/arrow-right.png" />
        </div>
        <div class="li" @click="goHref('myOrder')">
          <div class="left">
            <img class="icon" src="./../../assets/img/myOrder.png" />
            <div class="txt">我的订单</div>
          </div>
          <img class="img" src="./../../assets/img/arrow-right.png" />
        </div>
        <div class="li" @click="goHref('myGroup')">
          <div class="left">
            <img class="icon" src="./../../assets/img/myGroup.png" />
            <div class="txt">我的群组</div>
          </div>
          <img class="img" src="./../../assets/img/arrow-right.png" />
        </div>
        <div class="li" @click="goHref('carryUserList')">
          <div class="left">
            <img class="icon" src="./../../assets/img/carryUser.png" />
            <div class="txt">携行用户</div>
          </div>
          <img class="img" src="./../../assets/img/arrow-right.png" />
        </div>
        <div class="li" @click="goHref('entryRecord')">
          <div class="left">
            <img class="icon" src="./../../assets/img/entryRecord.png" />
            <div class="txt">入场记录</div>
          </div>
          <img class="img" src="./../../assets/img/arrow-right.png" />
        </div>
        <!-- <div class="li" @click="goHref('customerService')">
          <div class="left">
            <img class="icon" src="./../../assets/img/serve-icon.png" />
            <div class="txt">客服中心</div>
          </div>
          <img class="img" src="./../../assets/img/arrow-right.png" />
        </div> -->
        <div class="li" @click="goHref('oboutUs')">
          <div class="left">
            <img class="icon" src="./../../assets/img/aboutus.png" />
            <div class="txt">关于我们</div>
          </div>
          <img class="img" src="./../../assets/img/arrow-right.png" />
        </div>
        <div class="li" @click="goHref('refreshLogin')">
          <div class="left">
            <img class="icon" src="./../../assets/img/refreshLogin.png" />
            <div class="txt">重新登录</div>
          </div>
          <img class="img" src="./../../assets/img/arrow-right.png" />
        </div>
        <div
          class="li"
          v-if="
            user_id !== '' &&
            (mobile == '186****4039' ||
              mobile == '18612184039' ||
              mobile == '183****4773' ||
              mobile == '18335774773')
          "
          @click="goHref('cancel')"
        >
          <div class="left">
            <img class="icon" src="./../../assets/img/cancel.png" />
            <div class="txt">注销账户</div>
          </div>
          <img class="img" src="./../../assets/img/arrow-right.png" />
        </div>
      </div>
    </div>

    <!-- 注销弹窗 -->
    <!-- <u-modal :show="showLogoff" :title="title" :content="content"></u-modal> -->
  </div>
</template>

<script setup>
import wx from 'weixin-js-sdk'
import { onMounted, ref, watch } from 'vue'
import { showToast, showConfirmDialog } from 'vant'
import { useRoute, useRouter } from 'vue-router'
import { postData } from '@/request/request.js'
import { GetRequest } from '@/utils/utils'

let route = useRoute()
let router = useRouter()
let query = route.query
localStorage.clear()
localStorage.setItem('user_id', query.user_id || '')
localStorage.setItem('access_token', query.access_token || '')
localStorage.setItem('open_id', query.open_id || '')
localStorage.setItem('currentPath', query.currentPath || '')

const avatarUrl = ref('')
const nickName = ref('您还没有登录')
const mobile = ref('登录享受更多精彩服务')
const user_id = ref(localStorage.getItem('user_id'))
const title = ref('确定注销账户吗？')
const content = ref('注销账户后数据不可恢复')
const info = ref({})
const isRegister = ref(true)

//手机号替换中间4位为星号
const maskPhoneNumber = (phoneNumber) => {
  if (phoneNumber && phoneNumber?.length === 11) {
    return phoneNumber.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
  } else {
    if (!isRegister.value) {
      return '注册享受更多精彩服务'
    }
    return '手机号'
  }
}

const goMyInfo = () => {
  if (!isRegister.value) {
    showToast('请先绑定手机号')
    setTimeout(() => {
      wx &&
        wx.miniProgram.navigateTo({
          url: '/pages/loginPhone/loginPhone',
        })
    }, 2000)
  } else {
    wx &&
      wx.miniProgram.navigateTo({
        url: '/pagesC/myInfo/index',
      })
  }
}

let initInfo = () => {
  postData('/user/info/get', { with_health: 1 }).then((res) => {
    if (+res?.code === -67001) {
      isRegister.value = false
      nickName.value = '您还未注册'
      mobile.value = '注册享受更多精彩服务'
    } else {
      info.value = res?.datas || {}
      nickName.value = info.value?.nick_name
      mobile.value = info.value?.mobile
      avatarUrl.value = info.value?.avatar_url
    }
  })
}
//
const goHref = (txt) => {
  if (!isRegister.value) {
    showToast('请先绑定手机号')
    setTimeout(() => {
      wx &&
        wx.miniProgram.navigateTo({
          url: '/pages/loginPhone/loginPhone',
        })
    }, 2000)
  } else {
    if (txt == 'mySwimTicket') {
      wx &&
        wx.miniProgram.navigateTo({
          url: '/pagesC/mySwimTicket/mySwimTicket',
        })
    } else if (txt == 'myOrder') {
      wx &&
        wx.miniProgram.navigateTo({
          url: '/pagesC/myOrder/myOrder',
        })
    } else if (txt == 'myGroup') {
      wx &&
        wx.miniProgram.navigateTo({
          url: '/pagesC/myGroup/index',
        })
    } else if (txt == 'carryUserList') {
      wx &&
        wx.miniProgram.navigateTo({
          url: '/pagesC/carryUserList/carryUserList',
        })
    } else if (txt == 'entryRecord') {
      wx &&
        wx.miniProgram.navigateTo({
          url: '/pagesC/entryRecord/index',
        })
    } else if (txt == 'customerService') {
      wx &&
        wx.miniProgram.navigateTo({
          url: '/pagesC/customerService/index',
        })
    } else if (txt == 'oboutUs') {
      wx &&
        wx.miniProgram.navigateTo({
          url: '/pagesC/aboutUs/index',
        })
      //  router.push('/aboutUs')
    } else if (txt == 'myInfo') {
      wx &&
        wx.miniProgram.navigateTo({
          url: '/pagesC/myInfo/index',
        })
    } else if (txt == 'refreshLogin') {
      fnRefresh()
    } else if (txt == 'cancel') {
      fnCancel()
    }
  }
}
//重新登录
let fnRefresh = () => {
  localStorage.clear()
  let flagCancel = true
  wx &&
    wx.miniProgram.navigateTo({
      url: `/pages/blankClearStorage/blankClearStorage?cancel=${flagCancel}`,
    })
}

//注销
let fnCancel = () => {
  showConfirmDialog({
    title: '注销账户',
    message:
      '注销账户后，您的个人数据将被删除或匿名化且无法恢复，请确认您已经备份重要数据',
    confirmButtonText: '确定注销',
    cancelButtonText: '我再想想',
    confirmButtonColor: '#d5ad57',
    cancelButtonColor: '#676a6d',
  })
    .then(() => {
      postData('/user/cancel')
        .then((res) => {
          if (res.code == 0) {
            showToast('注销成功')
            localStorage.clear()
            let flagCancel = true
            //由于不能携带参数跳转到tabar页面，所以跳转到空白页面去清小程序的缓存
            // wx &&
            //   wx.miniProgram.navigateTo({
            //     url: `/pages/home/index?cancel=${flagCancel}`,
            //   })
            wx &&
              wx.miniProgram.navigateTo({
                url: `/pages/blankClearStorage/blankClearStorage?cancel=${flagCancel}`,
              })
          } else {
            showToast('注销失败')
          }
        })
        .catch((err) => {
          console.log(err)
        })
    })
    .catch(() => {
      // on cancel
      console.log('已取消')
    })
}

onMounted(() => {
  console.log(wx)
  let user_id = localStorage.getItem('user_id')
  let currentPath = localStorage.getItem('currentPath')
  if (!user_id || user_id == '') {
    wx &&
      wx.miniProgram.redirectTo({
        url:
          '/pages/loginPhone/loginPhone?currentPath=' +
          encodeURIComponent(currentPath),
      })
  } else {
    initInfo()
  }
})
watch(
  () => route.fullPath,
  () => {
    let user_id = localStorage.getItem('user_id')
    let currentPath = localStorage.getItem('currentPath')
    if (!user_id || user_id == '') {
      wx &&
        wx.miniProgram.redirectTo({
          url:
            '/pages/loginPhone/loginPhone?currentPath=' +
            encodeURIComponent(currentPath),
        })
    } else {
      initInfo()
    }
  }
)
</script>

<style scoped>
@import url('./../../assets/font/iconfont.css');
.wrap {
  width: 100%;
  position: relative;
  min-height: 100vh;
  overflow-x: hidden;
  overflow-y: scroll;
  background: #f7f7f8;
  font-size: 0.16rem;
}
.top {
  width: 100%;
  height: 1.2rem;
  background: linear-gradient(to bottom, #d5ad57, #cfb58a);
  padding: 0 0.1rem;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.top .left {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding-left: 0.1rem;
}
.top .left img {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
}
.top .left .txt {
  margin-left: 0.1rem;
  flex: 1;
  height: auto;
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  align-items: flex-start;
}
.top .left .avatar-txt {
  color: #fff;
  margin-bottom: 0.06rem;
}
.top .left .phone-txt {
  color: #fff;
}
.top .right {
  width: 0.2rem;
  height: 0.2rem;
  color: #fff;
  position: relative;
}
.top .right .qrcode {
  margin-right: 30rpx;
}
.center {
  box-sizing: border-box;
  width: 100%;
  height: 0.6rem;
  margin: 0 auto;
  background: #252525;
  border-radius: 0 0 10% 10%;
  color: #fff;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding-left: 0.15rem;
  font-size: 0.14rem;
  color: #d5ad57;
}
.list {
  width: 96%;
  border-radius: 0.075rem;
  background: white;
  height: auto;
  margin: 0 auto;
}
.list .ul {
  margin: 0;
  padding: 0;
  margin-top: 0.05rem;
  display: flex;
  flex-flow: column;
  justify-content: flex-start;
}
.list .ul .li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 0.5rem;
  line-height: 0.5rem;
  border-bottom: 1px solid #f5f5f0;
  padding: 0 0.1rem;
}
.list .ul .li .left {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.list .ul .li .left .txt {
  /* font-size: 0.14rem; */
  margin-left: 0.075rem;
  font-weight: 400;
  color: #333333;
}
.list .ul .li .left .icon {
  width: 0.26rem;
  height: 0.26rem;
}
.list .ul .li .img {
  width: 0.16rem;
  height: 0.16rem;
}
.left .iconfont {
  width: 0.2rem;
  height: 0.2rem;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-style: normal;
}
.right .iconfont {
  width: 0.2rem;
  height: 0.2rem;
  font-style: normal;
  position: absolute;
  left: 0;
  top: 0;
}
</style>
